<template>
	 <ls-page  title="" >
	             <view class="code-container">
	                 <view class="code-container-main">
	                     <image class="code-img" :src="userAvatar" mode="aspectFill" />
	                     <view class="store-fktext" style="">
	                         {{ payCardName }}
	                     </view>
	 
	                     <view class="main-header">
	                         <view class="main-header-left">
	                             <view class="left-value">￥{{ currentAmtAct }}</view>
	                             <view class="left-title">会员余额</view>
	                         </view>
	                         <view class="main-header-right" @click="toSave">去储值</view>
	                     </view>
	                     <view class="main-center">
	                         <!-- <image class="center-img" src="https://oss.jtmckj.com/wmp/images/common/i_code.png" mode="aspectFill" /> -->
	                         <view class="canvas-wrap">
	                             <!-- <canvas style="width: 500rpx; height: 500rpx" canvas-id="myQrcode"></canvas> -->
								     <up-qrcode :size="300" :val="qrcodeContent"></up-qrcode>

	                         </view>
	                     </view>
	                     <view class="main-footer">
	                         <view class="footer-left">付款码30秒自动刷新一次</view>
	                         <view class="footer-right" @click="reLoad">刷新</view>
	                     </view>
	                 </view>
	             </view>
	         </ls-page>
</template>

<script setup>
	import dayjs from 'dayjs';
	import {HFiveMemberAppObjProcess} from '@/api/public.js'
	import {ref,onMounted,onUnmounted} from 'vue'
	import {_FormatNumber} from '@/until/tools.js' 

	
	const userAvatar = ref('https://oss.jtmckj.com/wmp/images/common/i_default_avatar.png')
	const currentAmtAct = ref('0')
	const payCardName = ref('')
	const timer = ref(null)
	const mobile = ref('')
	
	const toSave = () => {
		uni.navigateTo({
			url:'/subpkg/view/centerStore/centerStore'
		})
	}
	const userInfo = ref(uni.getStorageSync('userInfo'))
	
	const startTimer = () => {
		timer.value = setInterval(() => {
			getCode()
		}, 30000)
	}
	
	const stopTimer = () => {
		clearInterval(timer.value)
		timer.value = null
	}
	// // 初始化二维码内容
	const qrcodeContent = ref('uview-plus');
	const getCode = async () => {
		const timestamp = Date.now()
		try {
			const res = await HFiveMemberAppObjProcess({
				functionName: 'CreateBarCodePay_H5',
				contentData: {
					code: userInfo.value.mobile,
					currentTime: timestamp
				}
			})
			qrcodeContent.value = res.data
		} catch (error) {
			console.error('生成二维码失败:', error)
		}
	}
	
	const reLoad = () => {
		uni.showToast({
			title: '刷新中，请稍等',
			icon: 'none'
		})
		getCode()
	}
	
	const oninit = ()=>{
		const cardInfo = uni.getStorageSync('cardInfo')
		currentAmtAct.value = cardInfo.currentAmtAct
		payCardName.value = cardInfo.payCardName
	}
	
	onMounted(() => {
		oninit()
		startTimer()
		userAvatar.value = userInfo.value.attachment || userAvatar.value
		getCode()
	})
	
	onUnmounted(() => {
		stopTimer()
	})
	

	
</script>

<style lang="scss" scoped>

.code-container {
    width: 100%;
    height: 100%;
    padding: 100rpx 32rpx 0rpx;
    box-sizing: border-box;
    overflow: scroll;
    .code-container-main {
        background: #ffffff;
        border-radius: 16rpx;
        position: relative;
        padding: 80rpx 43rpx 40rpx;
        .code-img {
            position: absolute;
            width: 120rpx;
            height: 120rpx;
            top: -60rpx;
            left: 291rpx;
        }
        .main-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            padding-bottom: 20rpx;
            .main-header-left {
                .left-value {
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 40rpx;
                    color: #212121;
                    line-height: 40rpx;
                    padding-bottom: 24rpx;
                }
                .left-title {
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #666666;
                    line-height: 28rpx;
                    padding-left: 2rpx;
                }
            }
            .main-header-right {
                background: var(--dt-backcolorPink);
                border-radius: 30rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 32rpx;
                color: var(--maincolor);
                line-height: 32rpx;
                padding: 15rpx 33rpx;
            }
        }
        .main-center {
            margin-bottom: 40rpx;
            .center-img {
                width: 600rpx;
                height: 600rpx;
            }
        }
        .main-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--one--back-color);
            border-radius: 4rpx;
            padding: 24rpx 48rpx;
            .footer-left {
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 32rpx;
                color: #666666;
                line-height: 32rpx;
            }
            .footer-right {
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 32rpx;
                color: #212121;
                line-height: 32rpx;
                padding-left: 32rpx;
                border-left: 1px solid #212121;
            }
        }
    }
}
.canvas-wrap {
    width: 600rpx;
    height: 600rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 6rpx;
    border: 1px solid #e4e4e4;
}
.store-fktext {
    text-align: center;
    margin-bottom: 20rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #212121;
}
</style>